import { useEffect } from "react";
import { message, Popconfirm, Table, Tag, Row, Col } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel, history } from "umi";
import { useReactive } from "ahooks";

import { useApplication } from "../../../hooks/application/organization";

import useWaitShelf from "../../../hooks/application/person/useWaitShelf";
import useUpdateShelfStatus from "../../../hooks/application/person/useUpdateShelfStatus";

const { Column } = Table;

const WaitShelfPersonApplications = () => {
    const { windowInnerHeight } = useModel("global");
    const { stateColor } = useApplication();
    const { loading, applications, loadWaitOnlineApplications } = useWaitShelf();
    const { loading: updateLoading, updateShelfStatus } = useUpdateShelfStatus();

    const state = useReactive({
        loading: false,
        submitLoading: false,
        applications: [],
        selectedApplication: [],
    });

    const onSelectChange = (newSelectedRowKeys) => {
        state.selectedApplication = newSelectedRowKeys;
    };

    const rowSelection = {
        selectedRowKeys: state.selectedApplication,
        onChange: onSelectChange,
    };

    const renderOperate = (_, r) => (
        <Popconfirm
            title={`确认要上架【${r.appName}】?`}
            placement="topRight"
            okButtonProps={{ loading: updateLoading }}
            onConfirm={(e) => {
                e.stopPropagation();
                updateShelfStatus([r.appUuid], "已上架", (res) => {
                    if (res) {
                        message.success("上架成功！");
                        loadWaitOnlineApplications();
                        state.selectedApplication = [];
                    }
                });
            }}
            onCancel={(e) => e.stopPropagation()}
        >
            <Tag color={stateColor[_]}>{_}</Tag>
        </Popconfirm>
    );

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 53;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 16 }}>待上架个人应用列表</span>}
            headerExtraContent={
                <ButtonGroup size={"default"}>
                    <Button icon={<IconRefresh />} onClick={loadWaitOnlineApplications}></Button>
                </ButtonGroup>
            }
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight - 60 }}
            footerStyle={{ padding: 0 }}
            footerLine={true}
            footer={
                <div style={{ padding: 14, display: "flex", justifyContent: "space-between" }}>
                    <Popconfirm
                        title="确认要下架这些应用吗？"
                        okButtonProps={{ loading: updateLoading }}
                        onConfirm={() =>
                            updateShelfStatus(state.selectedApplication, "已上架", (res) => {
                                if (res) {
                                    message.success("上架成功！");
                                    loadWaitOnlineApplications();
                                    state.selectedApplication = [];
                                }
                            })
                        }
                    >
                        <Button theme="solid" disabled={state.selectedApplication.length > 0 ? false : true}>
                            应用上架
                        </Button>
                    </Popconfirm>
                </div>
            }
        >
            <Table
                loading={loading}
                size="small"
                dataSource={applications}
                rowKey="appUuid"
                bordered
                pagination={false}
                rowSelection={rowSelection}
                scroll={{ y: cardBodyHeight - 40 - 50 }}
            >
                <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Column title="应用名称" dataIndex="appName" align="left" />
                <Column title="状态" dataIndex="appStat" width={100} align="center" render={renderOperate} />
            </Table>
        </SemiCard>
    );
};

export default WaitShelfPersonApplications;
